<template>
  <div>
    <div>{{ route.meta.title }}</div>
    <div>
      <table class="table" ref="tableRef">
        <tr class="table-header">
          <th>用户名</th>
          <th>操作</th>
          <th>时间</th>
        </tr>
        <tr
          class="table-row"
          :class="{
            dragging: draggingClass,
            dragover: draggoverClass, // 要插入的位置
          }"
          @dragstart="(e) => handleDragStart(e, value)"
          @dragover="(e) => handleDragOver(e, value)"
          @dragend="handleDragEnd($event, value)"
          v-for="value in tableRows"
          :key="value.id"
          draggable="true"
        >
          <td class="table-cell">{{ value.username }}</td>
          <td class="table-cell">{{ value.operation }}</td>
          <td class="table-cell">{{ value.time }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import { useGlobalStore } from "@/store";
const route = useRoute(); // 当前路由信息
const globalStore = useGlobalStore(); // 全局状态管理

const tableRef = ref(null); // 表格实例

const draggingClass = ref(""); // 拖动项类名
const draggoverClass = ref(""); // 要插入的位置类名
const dragCurrentItem = ref();
const dragoverItem = ref(); // 要插入的位置

/** 表格行数据 */
const tableRows = ref([
  {
    id: 1,
    username: "admin",
    operation: "添加角色",
    time: "2023-01-01 12:00:00",
  },
  {
    id: 2,
    username: "admin",
    operation: "删除角色",
    time: "2023-01-01 12:00:00",
  },
  {
    id: 3,
    username: "admin",
    operation: "添加用户",
    time: "2023-01-01 12:00:00",
  },
]);

onMounted(() => {
  console.log("records mounted", history.length);
  console.log(tableRef.value);
});

/**
 * 处理拖动开始事件
 * @param {DragEvent} e - 拖动事件对象
 */
const handleDragStart = (e: DragEvent, item: any) => {
  if (e.currentTarget instanceof HTMLElement) {
    e.currentTarget.classList.add("dragging");
    dragCurrentItem.value = e.currentTarget;
  }
};

/**
 * 处理拖动经过事件
 * @param {DragEvent} e - 拖动事件对象
 */
const handleDragOver = (e: DragEvent, item: any) => {
  e.preventDefault();
  console.log(e.target);
  // if (e.currentTarget instanceof HTMLElement) {
  //   draggoverClass.value = "dragover";
  //   e.currentTarget.classList.add("dragover");
  //   dragoverItem.value = e.currentTarget;
  // }
};

/**
 * 处理拖动结束事件
 * @param {DragEvent} e - 拖动事件对象
 */
const handleDragEnd = (e: DragEvent, item: any) => {
  e.preventDefault();
  dragCurrentItem.value.classList.remove("dragging");
  dragoverItem.value?.classList.remove("dragover");
};

/** 
 *  1、样式设计：
    为拖拽中的行添加 dragging 类（半透明 + 特殊背景），增强视觉反馈。
    为拖拽插入位置添加 drag-over 类（顶部边框高亮），提示用户释放后的位置。
    
    2、事件监听：
    支持鼠标事件（mousedown/mousemove/mouseup）和触摸事件（touchstart/touchmove/touchend），适配桌面和移动设备。
    passive: false 用于阻止触摸事件的默认行为（避免页面滚动干扰拖拽）。
    
    3、核心逻辑：
    开始拖拽：记录拖拽行和起始坐标，添加拖拽样式。
    拖拽过程：通过计算拖拽行与其他行的中心坐标，动态调整 tr 在 tbody 中的插入位置（insertBefore）。
    结束拖拽：清除样式和事件，输出排序结果）。
 */
</script>

<script lang="ts">
export default {
  name: "Records", // 组件名称
};
</script>

<style lang="css" scoped>
.table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
}
.table-header {
  background-color: #f2f2f2;
}
.table-row {
  background-color: #fff;
}

/** 偶数行背景颜色 */
.table-row:nth-child(even) {
  background-color: #f9f9f9;
}
/** 鼠标悬停行背景颜色 */
.table-row:hover {
  background-color: #f5f5f5;
}

.table-cell {
  padding: 8px;
  border: 1px solid #ddd;
}

/** 要插入的位置 */
:deep(.dragover) {
  border-top: 2px solid red;
}

/** 拖动项 */
:deep(.dragging) {
  background-color: yellow !important;
  opacity: 0.5 !important;
}
/* .dragging {
  background-color: yellow;
  opacity: 0.5;
} */
</style>
